---
title: Introduction
---

import { DownloadAppBanner } from '@docs/components/download-app-banner';

<blockquote cite="https://ui.shadcn.com/docs" className='text-fd-muted-foreground font-normal -mt-2'>
This is not a component library. It is how you build your component library.
</blockquote>

## Bringing the shadcn/ui experience to React Native

Built with familiar tools and libraries, it follows consistent styling, structure, and naming conventions, letting you use your favorite design system to create beautiful universal apps.


<div className="my-12">
<DownloadAppBanner />
</div>


## Key differences from shadcn/ui

- <a href='https://www.nativewind.dev' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Nativewind:</a> React Native Reusables integrates with Nativewind for utility-first styling on native, providing a Tailwind-like experience adapted for React Native.
- <a href='https://rnprimitives.com' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>RN Primitives:</a> A universal port of Radix UI primitives for React Native with an almost identical API, enabling consistent composition on native platforms.
- <span className='font-medium'>Portals:</span> React Native doesn't support DOM portals. On native platforms, components like modals, and menus need a [`PortalHost`](https://rnprimitives.com/portal/).
- <span className='font-medium'>No cascading styles:</span> Child elements like `Text` can't inherit styles from a parent class. Each element must be styled directly. We use a small [workaround](/docs/components/text#inheritance-system) for `Text`.
- <span className='font-medium'>No data attributes:</span> React Native doesn't support `data-*` attributes, so variants rely on props or state for native platforms.
- <a href='https://docs.swmansion.com/react-native-reanimated' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Reanimated:</a> Uses `react-native-reanimated` for smooth, native performance.
- <span className='font-medium'>Icons:</span> Uses a wrapper component in combination with a <a href='https://lucide.dev/guide/packages/lucide-react-native' target='_blank' rel='noreferrer' className='underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Lucide icon</a> to avoid wrapping every imported icon individually (e.g. `<Icon as={LeftArrowIcon} />`).
- <span className='font-medium'>Programmatic control:</span> Some components, such as `DropdownMenu`, can't be controlled with `open` or `onOpenChange` props. Instead, you use a `ref` to manage open and close behavior after layout calculation.

<div className='h-2' />

React Native Reusables aims to stay true to the spirit of <a href='https://ui.shadcn.com' target='_blank' rel='noreferrer' className='underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>shadcn/ui</a> while adapting it to the unique constraints of mobile/universal development.

